<template>
  <div class="search">
    <!-- 面包屑 -->
    <div class="searchheader">
      <div>
        <span @click="goHome">首页</span>
        <span class="el-icon-arrow-right"></span>
        <span>全部结果</span>
        <span class="el-icon-arrow-right"></span>
        <span>{{ searchParams.keyword }}</span>
      </div>
    </div>
    <!-- 面包屑 -->
    <!-- 分类 -->
    <div class="searchclassify">
      <div v-if="searchParams.props.length" class="checkclassify">
        <h3>已选 :</h3>
        <div
          v-for="(prop, index) in searchParams.props"
          :key="prop"
          class="checkItem"
        >
          <span>{{ prop | changeProp }}</span>
          <div @click="removeProp(index)">×</div>
        </div>
      </div>
      <div class="searchitem">
        <h3>分类</h3>
        <p @click="changeSearch(-1)" :class="{ active: currentIndex === -1 }">
          全部
        </p>
        <p
          @click="changeSearch(index, trademark)"
          v-for="(trademark, index) in trademarkList"
          :key="trademark.tmId"
          :class="{ active: currentIndex === index }"
        >
          {{ trademark.tmName }}
        </p>
      </div>
      <div v-if="currentIndex !== -1">
        <div v-for="attr in attrsList" :key="attr.attrId" class="searchitem">
          <h3>{{ attr.attrName }}</h3>
          <p
            @click="changeProps(attr, attrvalue)"
            v-for="(attrvalue, index) in attr.attrValueList"
            :key="index"
          >
            {{ attrvalue }}
          </p>
        </div>
      </div>
      <!-- <div class="searchitem">
        <h3>高级选项</h3>
        <div class="more">
          <p>
            全部
            <span class="el-icon-arrow-down"></span>
          </p>
          <div class="searchhover">
            <span>111</span>
            <span>111</span>
            <span>111</span>
            <span>111</span>
            <span>111</span>
            <span>111</span>
            <span>111</span>
            <span>111</span>
            <span>111</span>
            <span>111</span>
            <span>111</span>
          </div>
        </div>
        <p>红米手机</p>
        <p>小米手机</p>
        <p>华为手机</p>
        <p>苹果手机</p>
      </div> -->
    </div>
    <!-- 分类 -->
    <!-- 分类二 -->
    <div class="classify">
      <div class="cls-header">
        <div class="cls-header-left">
          <div>
            <span @click="changeOrder('one')" :class="{ active: isOrder }"
              >综合</span
            >
          </div>
          <div>
            <span>新品</span>
          </div>
          <div>
            <span>销量</span>
          </div>
          <div :class="{ active: !isOrder }">
            <span @click="changeOrder('two')">价格</span>
            <span
              v-if="!isOrder"
              :class="
                searchParams.order === '2:asc'
                  ? 'el-icon-top'
                  : 'el-icon-bottom'
              "
            ></span>
          </div>
        </div>
        <div class="cls-header-right">
          <span>收货地</span>
          <div>
            <span>北京 北京市</span>
            <span class="zidingyiicon"></span>
            <div class="hover-div">
              <div class="title-div">
                <span class="el-icon-search icons"></span>
                <input
                  placeholder="输入街道、乡镇、小区或商圈名称"
                  type="text"
                />
              </div>
              <div class="hover-center">
                <span>手动选择地址</span>
                <span class="el-icon-arrow-right"></span>
              </div>
              <span class="hover-text">我的收货地址</span>
              <p>
                现在<strong @click="toLogin">登录</strong
                >，可根据收货地址快速定位
              </p>
            </div>
          </div>
          <label> <input type="checkbox" name="" /> 促销 </label>
          <label> <input type="checkbox" name="" /> 分期 </label>
          <label> <input type="checkbox" name="" /> 仅看有货 </label>
        </div>
      </div>
      <!-- 展示组件 -->
      <SearchList />
      <!-- 展示组件 -->
      <!-- 分页器 -->
      <div v-if="pragationObj.total > 8" class="pagina">
        <el-pagination
          @current-change="handleCurrentChange"
          background
          :page-size="searchParams.pageSize"
          :current-page="searchParams.pageNo"
          layout="prev, pager, next"
          :total="pragationObj.total"
        >
        </el-pagination>
      </div>
      <!-- 分页器 -->
      <!-- 所有分类数据展示 -->
      <AllListMessage />
      <!-- 所有分类数据展示 -->
      <!-- 猜你喜欢 -->
      <LikeSwiper />
      <!-- 猜你喜欢 -->
    </div>
    <!-- 分类二 -->
  </div>
</template>

<script>
import SearchList from "./components/SearchList.vue";
import AllListMessage from "./components/AllListMessage.vue";
import LikeSwiper from "./components/LikeSwiper.vue";

import { mapActions, mapGetters } from "vuex";

export default {
  name: "Search",
  data() {
    return {
      isOrder: true, // 控制商品排序方式，综合或升序或降序
      keyword: "", // 搜索关键字
      // total: 0, // 返回数据总数
      currentIndex: -1, // 控制类名的添加与否
      //发送请求需要的参数
      searchParams: {
        keyword: "",
        category3Id: "",
        order: "", // 排序模式 asc为升序，desc为降序
        pageNo: 1, // 当前页码
        pageSize: 8, // 每页条数
        trademark: "", //品牌名称
        props: [], // 选中类别
      },
    };
  },
  components: {
    SearchList,
    AllListMessage,
    LikeSwiper,
  },
  computed: {
    ...mapGetters("search", ["pragationObj", "trademarkList", "attrsList"]),
  },
  watch: {
    $route: {
      immediate: true,
      handler() {
        // const { keyword, category3Id } = this.$route.query;
        // this.searchParams.keyword = keyword;
        // 合并清除上次请求的参数
        Object.assign(this.searchParams, {
          category3Id: undefined,
          keyword: undefined,
        });
        // 监视路由并合并点击或者搜索的参数发送请求
        Object.assign(this.searchParams, this.$route.query);
        this.updateSearch();
      },
    },
    total: {},
  },
  filters: {
    // 过滤props数据，格式成xx: xx
    changeProp(prop) {
      const arr = prop.split(":");
      return `${arr[2]}: ${arr[1]}`;
    },
  },
  methods: {
    ...mapActions("search", ["getSearchData"]),
    // 封装的发送请求获取最新数据的函数
    updateSearch() {
      this.getSearchData(this.searchParams);
    },
    // 分页器更改页码触发的函数
    handleCurrentChange(pageNo) {
      this.searchParams.pageNo = pageNo;
      this.updateSearch();
    },
    // 更改选中状态的函数
    changeSearch(index, trademark) {
      if (trademark) {
        const { tmId, tmName } = trademark;
        // 发送请求需要的参数类型为id加名称拼接的字符串
        this.searchParams.trademark = `${tmId}:${tmName}`;
      } else {
        this.searchParams.trademark = undefined;
      }
      this.searchParams.pageNo = 1;
      this.currentIndex = index;
      this.updateSearch();
    },
    // 更改已选分类的函数
    changeProps(attr, attrvalue) {
      // 发送请求需要的参数类型为attr的id加名称加选中类别拼接的字符串
      const { attrId, attrName } = attr;
      const prop = `${attrId}:${attrvalue}:${attrName}`;
      const { props } = this.searchParams;
      if (props.includes(prop)) return;
      props.push(prop);
      this.updateSearch();
    },
    // 删除分类细则
    removeProp(index) {
      // 数组splice方法会改变原数组，而slice不会，所以采用splice
      this.searchParams.props.splice(index, 1);
      this.updateSearch();
    },
    // 更改商品排序方式的函数
    changeOrder(mode) {
      if (mode === "one") {
        // 综合排序
        this.isOrder = true;
        this.searchParams.order = "";
      } else {
        // 2:asc为升序2:desc为降序
        this.isOrder = false;
        let order = "";
        this.searchParams.order === "2:asc"
          ? (order = "2:desc")
          : (order = "2:asc");
        this.searchParams.order = order;
      }
      this.searchParams.pageNo = 1;
      this.updateSearch();
    },
    // 返回首页
    goHome() {
      this.$router.push({
        path: "/home",
      });
    },
    toLogin() {
      this.$router.push({
        name: "login",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.search {
  .searchheader {
    width: 100%;
    min-width: 1226px;
    height: 40px;
    background-color: #f5f5f5;
    & > div {
      width: 1226px;
      margin: 0 auto;
      & > span {
        line-height: 40px;
        font-size: 12px;
        color: #757575;
        margin-right: 5px;
        &:nth-of-type(odd) {
          cursor: pointer;
        }
      }
    }
  }
  .searchclassify {
    width: 1226px;
    margin: 15px auto;
    position: relative;
    .searchitem {
      display: flex;
      height: 48px;
      line-height: 48px;
      font-size: 14px;
      border-bottom: 1px solid #ededed;
      h3 {
        width: 150px;
        color: #b0b0b0;
        font-weight: 400;
        &::after {
          content: ":";
        }
      }
      p {
        cursor: pointer;
        width: 148px;
        color: #424242;
      }
      p:hover + .searchhover {
        display: flex;
      }
    }
    .searchitem:last-child {
      border: none;
    }
  }
  .searchitem p:hover {
    color: #f60;
  }
  .more {
    .searchhover {
      position: absolute;
      width: 1226px;
      left: 0;
      top: 100%;
      background-color: #fff;
      display: none;
      flex-wrap: wrap;
      z-index: 5;
      span {
        line-height: 40px;
        margin: 0 50px;
        color: #424242;
        cursor: pointer;
      }
      span:hover {
        color: #f40;
      }
    }
  }
  .classify {
    width: 100%;
    min-width: 1226px;
    background-color: #f5f5f5;
    padding: 50px 0;
    .cls-header {
      width: 1226px;
      height: 40px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .cls-header-left {
        display: flex;
        & > div {
          color: #424242;
          font-size: 14px;
          padding: 0 20px;
          border-right: 1px solid #e0e0e0;
          span {
            cursor: pointer;
            &:hover {
              color: #f60;
            }
          }
          span:hover + span {
            color: #f60;
          }
          &:last-child {
            border: none;
          }
        }
      }
      .cls-header-right {
        display: flex;
        align-items: center;
        font-size: 14px;
        label {
          margin-left: 30px;
        }
        & > span {
          margin-right: 5px;
        }
        & > div {
          padding: 7px 14px;
          cursor: pointer;
          background-color: #fff;
          position: relative;
          .hover-div {
            position: absolute;
            width: 600px;
            left: -235px;
            top: 34px;
            background-color: #fff;
            box-shadow: 8px 8px 15px #ccc;
            display: none;
            flex-direction: column;
            padding: 50px;
            .title-div {
              position: relative;
              input {
                height: 40px;
                padding: 5px 5px 5px 35px;
                box-sizing: border-box;
                border: 1px solid #bdf3d4;
                width: 100%;
                &:focus {
                  outline: none;
                  border: 1px solid #cbf5fb;
                }
              }
              .icons {
                font-size: 28px;
                font-weight: 500;
                position: absolute;
                left: 5px;
                top: 5px;
                color: #2ae0c8;
              }
            }
            .hover-center {
              text-align: right;
              margin: 20px 0;
              color: #ccc;
            }
            .hover-text {
              color: #ccc;
              font-size: 16px;
              margin-bottom: 20px;
            }
            p {
              text-align: center;
              strong {
                color: #f60;
              }
            }
          }
          .zidingyiicon {
            display: block;
            position: absolute;
            right: -4px;
            width: 0;
            height: 0;
            border: 6px solid transparent;
            border-left-color: #ccc;
            transform: rotate(46deg);
          }
          &:hover .hover-div {
            display: flex;
          }
        }
      }
    }
  }
  .pagina {
    width: 1226px;
    height: 50px;
    margin: 0 auto 20px;
    position: relative;
    .el-pagination {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%) scale(1.3);
    }
  }
  .checkclassify {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ededed;
    padding: 10px 0 20px;

    h3 {
      width: 150px;
      color: #b0b0b0;
      font-weight: 400;
      font-size: 14px;
    }
    .checkItem {
      display: flex;
      border: 1px solid #b0b0b0;
      padding: 5px 78px 5px 20px;
      margin-right: 20px;
      align-items: center;
      position: relative;
      span {
        color: #424242;
        font-size: 14px;
      }
      div {
        position: absolute;
        right: 0;
        top: -1px;
        width: 32px;
        height: 103%;
        cursor: pointer;
        background-color: #b0b0b0;
        color: #fff;
        font-size: 18px;
        font-weight: 900;
        text-align: center;
      }
    }
  }
}
.active {
  color: #f60 !important;
}
</style>